<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Log convert</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="icon" href="img/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" media="all" href="/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" media="all" href="/css/bootstrap-responsive.min.css" th:href="@{css/bootstrap-responsive.min.css}"/>
    <link rel="stylesheet" type="text/css" media="all" href="/css/bootstrap-theme.min.css" th:href="@{css/bootstrap-theme.min.css}"/>
    <link rel="stylesheet" type="text/css" media="all" href="/css/jquery-ui.min.css" th:href="@{css/jquery-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" media="all" href="/css/jquery-ui.structure.min.css" th:href="@{css/jquery-ui.structure.min.css}"/>
    <link rel="stylesheet" type="text/css" media="all" href="/css/jquery-ui.theme.min.css" th:href="@{css/jquery-ui.theme.min.css}"/>
    
	<script type="text/javascript" src="/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
	<script type="text/javascript" src="/js/jquery-1.12.4.js" th:src="@{/js/jquery-1.12.4.js}"></script>
	<script type="text/javascript" src="/js/jquery-ui.js" th:src="@{/js/jquery-ui.js}"></script>

	<style type="text/css">
		@media(min-width:1700px){
			.container{
				width:1700px;
			}
			.container .page-header{
				
			}
			
		}
		.row textarea{
			width:100%;
			width:-moz-available;
			width:-webkit-fill-available;
			min-height: 750px; 
			border:1px solid silver;
			resize:vertical;
			word-break:break-all;
		}
		.response span{
			color: red;
		}
		.error span{
			color: red;
		}
		hr{
			background-color:silver; 
			height:2px;
		}
		table tr td{
			min-width:180px;
			word-break:break-all;
		}
		#dialog{
			word-break:break-all;
		}
	</style>
</head>
<body>

	
<div class="container">
	<div class="page-header">
	  	<h1>Log Convert <small>CTRL + A to copy all transaction logs in Splunk, and paste into textarea </small></h1>
	</div>
	<div class="row">
		  <div class="col-lg-6">
		  	<form  th:action="@{/convert}" method="post" th:object="${convertRequest}">
				<div class="form-group">
			  		<button type="submit" class="btn btn-default">Submit</button>
		  		</div>
				<div class="form-group">
			  		<textarea  th:field="*{param}"></textarea>
		  		</div>
			</form>
		  </div>
		  <div class="col-lg-6">
		  	<div class="form-group">
		  		<form  th:action="@{/index}" method="get" >
			  		<button type="submit" class="btn btn-default">Return</button>
			  	</form>
	  		</div>
	  		<div th:if="${message!=null}" class="error">
	  			<div class="form-group">
			  		<h2><span th:text="*{message}" ></span></h2>
		  		</div>
	  		</div>
	  		
	  		<div th:if="${logResponse != null}" th:object="${logResponse}" class="response">
	  			
	  			<label>Request body (<span th:text="*{numberOfRequestBody + numberOfIncompleteRequestBody}">0</span>): </label>
	  			<table class="table table-hover">
	  				<tr th:each="requestContent : ${logResponse.requestContents}">
	  					<td th:text="${requestContent.url}">NULL</td>
	  					<td th:utext="${(#strings.length(requestContent.requestBody) gt 500) 
		  								? #strings.abbreviate(requestContent.requestBody, 500) + ' &lt;button&gt;View More&lt;/button&gt;' + '&lt;p&gt;' + requestContent.requestBody +'&lt;/p&gt;'
		  								: requestContent.requestBody}"></td>
	  				</tr>
	  			</table>
	  			<div th:if="*{numberOfIncompleteRequestBody > 0}">
			  		<span th:text="${message}"></span>
			  	</div>

				<hr/>

				<label>Response body (<span th:text="*{numberOfResponseBody + numberOfIncompleteResponseBody}">0</span>): </label>
				
	  			<table class="table table-hover" id="response">
	  				<tr th:each="responseContent: ${logResponse.responseContents}">
	  					<td th:text="${responseContent.url}"></td>
	  					<td th:utext="${(#strings.length(responseContent.responseBody) gt 500) 
		  								? #strings.abbreviate(responseContent.responseBody, 500) + ' &lt;button&gt;View More&lt;/button&gt;' + '&lt;p&gt;' + responseContent.responseBody +'&lt;/p&gt;'
		  								: responseContent.responseBody}"></td>
	  				</tr>
	  			</table>
	  			<div th:if="*{numberOfIncompleteResponseBody > 0}">
			  		<span th:text="${message}"></span>
			  	</div>
			  	<hr/>
			  	
			  	<div th:if="${not #lists.isEmpty(logResponse.reservationResponses)}">
				  	<label>Reservations:</label>
					<table class="table table-hover">
						<tr>
							<td>Spirit Code</td>
							<td>Confirmation Number</td>
							<td>Reservation Name Id</td>
							<td>Status</td>
							<td>Arrival Date</td>
							<td>Departure Date</td>
							<td>Checkin Eligible</td>
							<td>Checkout Eligible</td>
						</tr>
		  				<tr th:each="reservationResponse : ${logResponse.reservationResponses}">
		  					<td th:text="${reservationResponse.spiritCode}">NULL</td>
		  					<td th:text="${reservationResponse.confirmationNumber}">NULL</td>
		  					<td th:text="${reservationResponse.reservationNameId}">NULL</td>
		  					<td th:text="${reservationResponse.status}">NULL</td>
		  					<td th:text="${reservationResponse.checkinDate}">NULL</td>
		  					<td th:text="${reservationResponse.checkoutDate}">NULL</td>
		  					<td th:text="${reservationResponse.checkinEligible}">NULL</td>
		  					<td th:text="${reservationResponse.checkoutEligible}">NULL</td>
		  				</tr>
		  			</table>				
			  	</div>
			  	
			  	<div th:if="${logResponse.summaryRateResponse != null}">
				  	<label>Rate Summary:</label>
					<table class="table table-bordered">
						<tr>
							<td>Spirit Code</td>
							<td>Property Name</td>
						</tr>
		  				<tr>
		  					<td th:text="${logResponse.summaryRateResponse.spiritCode}">NULL</td>
		  					<td th:text="${logResponse.summaryRateResponse.propertyName}">NULL</td>
		  				</tr>
		  			</table>				
					<table class="table table-hover">
						<tr>
							<td>Rate Plan Name</td>
							<td>Room Type Code</td>
							<td>Total Before Tax</td>
							<td>Currency Code</td>
							<td>Confidential</td>
							<td>Room Name</td>
						</tr>
		  				<tr th:each="roomRate : ${logResponse.summaryRateResponse.roomRates}">
		  					<td th:text="${roomRate.ratePlanName}">NULL</td>
		  					<td th:text="${roomRate.roomTypeCode}">NULL</td>
		  					<td th:text="${roomRate.totalBeforeTax}">NULL</td>
		  					<td th:text="${roomRate.currencyCode}">NULL</td>
		  					<td th:text="${roomRate.confidential}">NULL</td>
		  					<td th:text="${roomRate.roomName}">NULL</td>
		  				</tr>
		  			</table>				
			  	</div>
	  		</div>
		  </div>
		</div>
</div>

<div id="dialog" title="All content"></div>

<script type="text/javascript">
	$("table button").addClass("btn btn-danger");
	$("table p").addClass("hidden");
	
	$("#dialog").dialog({
		width:"600",
		height:"600",
		modal:true,
		autoOpen: false,
		show: {
		  effect: "blind",
		  duration: 1000
		},
		hide: {
		  effect: "explode",
		  duration: 2000
		}
    });
	$("table button").click(function(){
		
		var t = $(this).next().text();
		$("#dialog").text(t);
		$( "#dialog" ).dialog("open");
	});
	
	
</script>
</body>
</html>